<template>
  <div :style='{ "background": background_color}' v-loading="loading" element-loading-text="加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)">
    <!-- # 标题 -->
    <div class="tabbar" style="{ background: white; }">
        <span>小小笔记本</span>
        <div class="right_wrappered">
            <router-link class="selection" to="/"><i class="el-icon-s-promotion "></i>首页</router-link>
            <div class="selection img_wrapper">
                <img class="head_img selection" :src="imgUrl" alt="">
                &nbsp;{{ name }}
            </div>
        </div>
    </div>

    <el-tooltip placement="top" content="回到顶部">
      <back-to-top :custom-style="myBackToTopStyle" 
      :visibility-height="200" :back-position="0" transition-name="fade"/>
    </el-tooltip>

    <div class="zhaozi">
        <div v-cloak class="drop this_index" :style='{ "background": background_color, "color": font_color}'>
            <!-- 面包屑 -->
            <div class="bread_xie" :style='{ "background": ground_color}'>
                <el-breadcrumb separator-class="el-icon-arrow-right">
                    <el-breadcrumb-item :to="{ path: '/' }"><i class="el-icon-s-home"></i> 首页</el-breadcrumb-item>
                    <el-breadcrumb-item >{{ content.kind__kind_name }}</el-breadcrumb-item>
                    <el-breadcrumb-item >{{ content.title }}</el-breadcrumb-item>
                </el-breadcrumb>
            </div>
            <!-- 内容部分 -->
            <div :style='{ "background": ground_color}' class="content_artical">
                <div class="title_artical">
                    {{ content.title }}
                </div>
                <div class="second_title_artical" style="font-size: 14px;">
                    {{content.add_time}}&nbsp;&nbsp;&nbsp; 阅读数：{{ content.read_num }}&nbsp;&nbsp;&nbsp;&nbsp; 评论：{{ content.comment_num }}
                </div>
                <!-- <div>{{ content.text_content }}</div> -->
                <div v-html="content.text_content"  class="content_artical_content"></div>
            </div>
            <!-- 评论区 -->
            <div :style='{ "background": ground_color,}' class="comment_area">
                <div class="comment_num">{{ content.comment_num }} 条评论</div>
                <div class="comment_pool">
                    <el-input
                        type="textarea"
                        :rows="2"
                        placeholder="评论两句吧.."
                        v-model="textarea">
                    </el-input>
                    <el-button @click="commit_comment()" style="margin-left: 10px; width: 55px; height: 55px;" type="primary" icon="el-icon-edit" circle></el-button>
                </div>
                <!-- 评论详情 -->
                <ul>
                    <li v-for="item in comments" :key="item.id" class="li_comment_list">
                        <div class="touxiang_commenter">
                            <img :src="item.user__avatar" alt="">
                            <div style="margin-left: 5px;"> 
                                <span>{{ item.user__username }}</span>
                                <div style="font-size: 10px;">{{ item.id }} 楼 . {{ item.add_time }}</div>
                            </div>
                        </div>
                        <div style="margin-left: 15px;margin-bottom: 10px;">
                            <p>{{ item.content }}</p>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <div style="width: 5px; height: 1000px; background: transparent"></div>
    </div>
    <!-- 底部的备案信息 -->
    <div class="legal" style="margin-top: 100px">
        <div class="legal_inner">
          Copyright © 2021 Leexun. powered by Django.
        </div>
        <div class="legal_inner">
          <a target="_blank" href="https://beian.miit.gov.cn/#/Integrated/index">皖ICP备2021008932号</a>
          <span>&nbsp; | &nbsp;已续航{{ day }}天</span>
        </div>
    </div>
  </div>
</template>

<script>
import { color, host } from '../network/color_check.js';
import Cookies from 'js-cookie';
import Qs from 'qs'
import axios from 'axios';
import  BackToTop from '../../node_modules/element-ui/packages/backtop/index'

export default {
    name: "artical",
    components: { BackToTop },
    data() {
        return {
            day: 1,
            myBackToTopStyle: {
                right: '50px',
                bottom: '50px',
                width: '40px',
                height: '40px',
                borderRadius: '4px',
                lineHeight: '45px', // 请保持与高度一致以垂直居中
                background: '#e7eaf1'// 按钮的背景颜色
            },
            id: this.$route.params.id, //将URL 地址中传递过来的Id值 挂载到data,方便以后调用,
            name: '',
            imgUrl: '',
            content: {},
            loading: '',
            textarea: '',
            comments: [],

            ground_color: '#f4f4f4', // 背景色 #f4f4f4是原来的颜色，#22303f是暗黑色, 
            background_color: 'white', // 元素的背景颜色，white, #18222d!important
            font_color: 'black',
            a_color: 'pink',
            tabbar_color: 'pink',
            write_color: '#eff7ff', // #18222d!important
        }
    },
    created() {
        this.loading = true;
        this.day = this.dateDiff('2021-08-11');
        var a = Cookies.get();
        // 遍历cookie的值
        for(let key in a){
            // console.log(key);
            if( a[key] === '1' ) {
                this.name = key;
                break;
            }
        }
        this.imgUrl= '';
        // 获取头像
        if( Cookies.get('img_url') ) {
            this.imgUrl = Cookies.get('img_url');
        } else if (this.name){
            this.$message.error("获取头像失败");
        }
        
        this.ground_color = color.ground_color;
        this.background_color = color.background_color;
        this.font_color = color.font_color;
        this.tabbar_color = color.tabbar_color;
        this.a_color= color.a_color;
        this.write_color = color.write_color;
        this.value = color.value;
        this.getArtical();
        this.loading = false;
    },
    methods: {
        dateDiff(sDate1) {
			 	var date2 = new Date();
			 	var date1 = new Date(Date.parse(sDate1.replace(/-/g,   "/")));
			 	var iDays = parseInt(Math.abs(date2.getTime()- date1.getTime()) /1000/60/60/24); 
			 	return iDays;
		},
        // 提交评论
        commit_comment() {
            if (!this.name) {
                this.$message.warning("请登录后再进行评论哦");
                return ;
            }
            if ( !this.textarea ) {
                this.$message.warning("评论不可以为空呀..");
                return ;
            }
            // 发送axios请求
            axios({
                url: host.url+'/comment/commit_comment.htm',
                method: 'post',
                headers: { 'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'},
                data: {
                    comment_content: this.textarea,
                    user_name: this.name,
                    artical_id: this.id
                },
                transformRequest: [function (data) {
                    data = Qs.stringify(data);
                    return data;
                }],
            })
            .then(suc => {
                if( suc.data.code === 200 ) {
                    this.$message.success("发表评论成功！");
                    this.textarea = '';
                    this.comments = suc.data.data;
                    this.content.comment_num++;
                } else {
                    this.$message.error("评论失败了");
                }
            }) 
            .catch(fail => {
                this.$message.error("出错啦..");
            }) 
        },
        getArtical() {
           axios({
               url:  host.url+'/artical/content/'+this.id+'.htm',
               method: 'get'
           }).then( suc => {
               this.content = suc.data.detail;
               this.comments = suc.data.comments;
           }).catch( fail => {
               this.$message.error("获取文章内容出错了..")
           });
       } 
    }
}
</script>

<style>
pre {
    background:lightsteelblue;
    border-radius: 5px;
    padding-left: 5px;
    margin: 5px 15px;
    color: black;
}
.touxiang_commenter {
    display: flex;
    margin-bottom: 10px;
}
.li_comment_list {
    margin-left: 10px; 
    margin-right: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid #eff7ff;
}
.li_comment_list img {
    border-radius: 50%;
    width: 45px;
    height: 45px;

}
.comment_pool {
    margin-left: 10px; 
    margin-right: 10px;
    margin-bottom: 10px;
    /* background: wheat; */
    display: flex;
}
.comment_num {
    margin-left: 10px; 
    margin-right: 10px;
    margin-bottom: 10px;
    height: 45px;
    line-height: 45px;
    border-bottom: 1px solid #eff7ff;
    padding-left: 2px;
    border-left: 4px solid #04B431; 
}
.content_artical_content h1 {
    font-size: 25px;
    border-left: 4px solid #04B431; 
    display: block;
    height: 40px;
    line-height: 40px;
    background-color: transparent;
    margin-left: -5px;
}
.comment_area {
    width: 70%;
    margin: 10px auto;
    font-size: 16px;
    padding-bottom: 20px;
}
.content_artical_content {
    margin-left: 10px;
    margin-right: 10px;
    padding-bottom: 50px;
}
.second_title_artical {
    display: flex;
    justify-content: center;
    margin-bottom: 50px;
}
.title_artical {
    font-size: 20px;
    font-weight: 700!important;
    color: #17a2b8!important;
    display: flex;
    justify-content: center;
    height: 40px;
    line-height: 40px;
    margin-bottom: 10px;
}
.el-breadcrumb {
    font-size: 16px;
}
.el-breadcrumb .el-breadcrumb__inner  {
    color: orange;
}
.el-breadcrumb__item {
    height: 40px;
    line-height: 40px;
}
.bread_xie {
    /* height: 40px; */
    width: 70%;
    /* line-height: 40px; */
    margin: 10px auto;
}
.content_artical {
    width: 70%;
    margin: 0 auto;
    font-size: 16px;
}
.this_index {
    font-family:  -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    width: 100%;
    height: auto;
    margin-bottom: -20px;
}
</style>